﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <p>componentWillMount(), componentDidMount(), componentWillUpdate(), componentDidUpdate(), componentWillUnmount()</p>

    <p>URL: http://facebook.github.io/react/docs/component-specs.html#lifecycle-methods </p>
    <div id="info"></div>
    <div id="d1"></div>
</body>
</html>
<script type="text/jsx">
    var Hello = React.createClass({
        getInitialState:function(){
            console.log("getInitialState");
            return {opacity:1.0,count:0,timerId:null};
        },
        //dom加载完成之后的callback，非常重要，比如ajax等在这里执行
        componentDidMount:function(){
            $("#info").html("has been removed the info div");
            console.log("componentDidMount");
            this.timer = window.setInterval(function(){
                var opacity = this.state.opacity;
                var count = this.state.count;            
                var p = React.findDOMNode(this.refs._p);

                opacity -=0.1;
                
                if(opacity <=0.1){ 
                    opacity=1;
                    count++;
                    //document.body.removeChild(p);
                };
                this.setState({opacity:opacity,count:count});

            
            }.bind(this),100);
        },
        componentWillMount:function(){
            console.log("componentWillMount");

            $("#info").html("ready for the React Component <Hello>");
        },
        //state变化之后，component渲染之前调用这个方法
        componentWillUpdate:function(nextProps,nextState){
            console.log("componentWillUpdate");
        },
        //state变化之后，component渲染之后调用这个方法
        componentDidUpdate:function(nextProps,nextState){
            console.log("componentDidUpdate");
        },
        componentWillReceiveProps:function(nextProps){
            console.log("componentWillReceiveProps");
            this.setState({opacity:1.0});
        },
        //在dom加载完成之后，并且state改变之后执行,如果return false那么不会执行下一次渲染
        //这个function类似与angular的watch
        shouldComponentUpdate :function(nextProps, nextState){
            
            //if(nextState.opacity<=0.1){
            //    this.setState({opacity:1.0});
            //}
            //if(nextState.count >= 10){
                //this.setState({opacity:1.0,count:nextState.count});
                //window.clearInterval(this.timer);
                //return false;    
            //}
            //return false;
            return true; 
        },
        componentWillUnmount:function(){
            console.log("componentWillUnmount");
        },
        render:function(){
            return (
                <div style={{opacity: this.state.opacity}}>
                    Hello {this.props.name}<br/>
                    Count:<p ref='_p'>{this.state.count}</p>
                </div>
            );
        }
    });

    React.render(
        <Hello name='World' />,$("#d1").get(0)
    );
</script>
